<template>
  <view class="body">
    <view class="header">
      <view class="account">
        <!-- 已登录显示头像上传按钮 -->
        <button v-if="checkLogin()" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="avatarUrl" mode="widthFix"></image>
        </button>
        <!-- 未登录显示登录入口 -->
        <view v-else class="unlogin-wrap">
          <button class="unlogin-avatar" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
          <button class="unlogin-text" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击登录</button>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="content">
        <!-- 学工认证 -->
        <view @click="checkId" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/个人信息.png" mode="widthFix"></image>
            <text class="item-text">学工认证</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>

        <!-- 个人信息 -->
        <view @click="toInfo" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/个人信息.png" mode="widthFix"></image>
            <text class="item-text">个人信息</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>

        <!-- 我的报修 -->
        <!--     <view @click="toBaoxiu" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/水电记录.png" mode="widthFix"></image>
            <text class="item-text">我的报修</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view> -->

        <!-- 我的工单（仅教师可见） -->
        <!--      <view @click="toBaodan" class="item" hover-class="none" v-if="isTeacher && checkLogin()">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/水电记录.png" mode="widthFix"></image>
            <text class="item-text">我的工单</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view> -->

        <!-- 使用记录 -->
        <view @click="toRecord" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/水电记录.png" mode="widthFix"></image>
            <text class="item-text">使用记录</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>

        <!-- 生物识别 -->
        <!--   <view @click="toFaceDetect" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/生物识别.png" mode="widthFix"></image>
            <text class="item-text">生物识别</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view> -->

        <!-- 意见反馈 -->
        <view @click="toFeedback" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/意见反馈.png" mode="widthFix"></image>
            <text class="item-text">意见反馈</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>

        <!-- 使用说明 -->
        <view @click="toUserManual" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/商城_使用说明.png" mode="widthFix"></image>
            <text class="item-text">使用说明</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>

        <!-- 退出登录（仅登录状态显示） -->
        <view v-if="checkLogin()" @click="showLogoutModal" class="item" hover-class="none">
          <view class="item-left">
            <image class="item-icon" src="../../static/person/退出登录.png" mode="widthFix"></image>
            <text class="item-text">退出登录</text>
          </view>
          <image class="item-arrow" src="../../static/return.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    loginFn,
    getPhoneNumberFn
  } from "./login.js"
  export default {
    data() {
      return {
        userInfo: {},
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        userRole: '' // 存储用户角色
      };
    },
    computed: {
      // 判断是否为教师角色
      isTeacher() {
        const iftrue = false
        if (this.userRole === 'teacher') {
          return true
        } else if (this.userRole === 'superAdmin') {
          return true
        } else if (this.userRole === 'admin') {
          return true
        }
      }
    },
    onShow() {
      this.getUserInfo();
      this.updateUserRole(); // 每次页面显示时更新角色
    },
    methods: {
      // 更新用户角色（从本地存储获取）
      updateUserRole() {
        try {
          this.userRole = uni.getStorageSync('role') || '';
          console.log('当前用户角色:', this.userRole);
        } catch (e) {
          console.error('获取角色失败:', e);
          this.userRole = '';
        }
      },

      // 获取用户信息
      getUserInfo() {
        const isLogin = this.checkLogin();
        const userInfo = uni.getStorageSync('userInfo') || {};
        this.userInfo = {
          ...userInfo,
          name: userInfo.name || (isLogin ? '用户' : '点击登录')
        };
      },

      // 检查登录状态
      checkLogin() {
        return uni.getStorageSync('islogin') || false;
      },

      // 跳转个人信息
      toInfo() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '../../pagesPerson/bind/bind'
        });
      },

      // 跳转学工认证
      checkId() {
        if (!this.checkLogin()) return this.toLoginTip();

        // const userInfo = uni.getStorageSync('userInfo');
        // if (!userInfo.ss_mc) {
        // 	return uni.showToast({ title: '请先绑定宿舍', icon: 'none' });
        // }
        uni.navigateTo({
          url: '/pagesPerson/idAuthentication/idAuthentication'
        });
      },

      // 跳转我的报修
      toBaoxiu() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '/life/baoxiu/baoxiu'
        });
      },

      // 跳转我的工单（已登录且是教师才允许访问）
      toBaodan() {
        if (!this.checkLogin()) return this.toLoginTip();
        if (!this.isTeacher) {
          return uni.showToast({
            title: '无权限访问',
            icon: 'none'
          });
        }
        uni.navigateTo({
          url: '/life/baodan/baodan'
        });
      },

      // 跳转使用记录
      toRecord() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '/pagesPerson/record/record'
        });
      },

      // 跳转生物识别
      toFaceDetect() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '/pagesPerson/faceDetect/faceDetect'
        });
      },

      // 跳转意见反馈
      toFeedback() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '/pagesPerson/feedback/feedback'
        });
      },

      // 跳转使用说明
      toUserManual() {
        if (!this.checkLogin()) return this.toLoginTip();
        uni.navigateTo({
          url: '/pagesPerson/userManual/userManual'
        });
      },

      // 未登录提示
      toLoginTip() {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
      },

      // 更换头像
      onChooseAvatar(e) {
        this.avatarUrl = e.detail.avatarUrl;
      },

      // 退出登录
      showLogoutModal() {
        uni.showModal({
          title: '确认退出',
          content: '退出登录将清除本地缓存',
          success: (res) => {
            if (res.confirm) {
              uni.clearStorageSync();
              uni.setStorageSync('islogin', false);
              this.updateUserRole(); // 退出后更新角色
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }
        });
      },

      // 手机号登录
      getPhoneNumber(e) {
        if (!e.detail.code) return uni.showToast({
          title: '授权失败',
          icon: 'none'
        });

        uni.setStorageSync('phoneCode', e.detail.code);
        loginFn().then(openIdRes => {
          getPhoneNumberFn(e.detail.code, openIdRes).then(loginRes => {

            if (loginRes.success) {
              uni.showToast({
                title: '登录成功'
              });
              // 存储登录状态和用户信息
              uni.setStorageSync('islogin', true);
              uni.setStorageSync('token', loginRes.data.token);
              uni.setStorageSync('userInfo', loginRes.data.userinfo);
              uni.setStorageSync('role', loginRes.data.userinfo.role || ''); // 存储角色
              this.updateUserRole(); // 登录后立即更新角色
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          });
        });
      },
    }
  };
</script>

<style scoped>
  .body {
    width: 100%;
    min-height: 100vh;
    background-color: #e3e3e3;
    padding-top: 20rpx;
    box-sizing: border-box;
  }

  /* 头部区域 */
  .header {
    width: 90%;
    margin: 30rpx auto 0;
    padding: 40rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 头像样式 */
  .avatar-wrapper {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: transparent;
  }

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  /* 未登录样式 */
  .unlogin-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .unlogin-avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background: url('../../static/personal.png') center/cover no-repeat;
    border: none;
    background-color: transparent;
  }

  .unlogin-text {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #333;
    background: transparent;
    border: none;
  }

  /* 内容区域 */
  .container {
    width: 100%;
    padding: 20rpx 0;
    margin-top: 20rpx;
  }

  .content {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx 0;
  }

  /* 功能项样式 */
  .item {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
  }

  .item:last-child {
    border-bottom: none;
    /* 最后一项去除下划线 */
  }

  .item-left {
    display: flex;
    align-items: center;
  }

  .item-icon {
    width: 48rpx;
    height: 48rpx;
  }

  .item-text {
    font-size: 32rpx;
    color: #333;
    margin-left: 24rpx;
  }

  .item-arrow {
    width: 24rpx;
    height: 24rpx;
    transform: rotate(180deg);
  }

  /* 去除按钮默认样式 */
  button::after {
    border: none;
  }
</style>